<template>
  <div class="foorter">
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    />
    <div class="footerwrap">
      <div class="iconwrap" @click="toHome">
        <div class="iconfont icon-tubiao-"></div>
        <div class="text">首页</div>
      </div>
      <div class="iconwrap" @click="toOrder">
        <div class="iconfont icon-tubiao-2"></div>
        <div class="text">点单</div>
      </div>
      <!-- <div class="iconwrap" @click="toShop">
        <div class="iconfont icon-tubiao-3"></div>
        <div class="text">订单</div>
      </div> -->
      <div class="iconwrap" @click="toMine">
        <div class="iconfont icon-tubiao-1"></div>
        <div class="text">我的</div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();

    const toHome = () => {
      router.push("/home");
    };

    const toOrder = () => {
      router.push("/order");
    };

    const toShop = () => {
      router.push("/shop");
    };

    const toMine = () => {
      router.push("/mine");
    };

    return {
      toHome,
      toOrder,
      toShop,
      toMine,
    };
  },
};
</script>

<style>
.foorter {
    background: #fff;
}
.footerwrap {
  display: flex;
  justify-content: space-around;

}

.iconfont {
  font-size: 20px;
  margin-left: 4px;
}
.text {
  font-size: 14px;
  padding: 5px 0;
}
</style>